<template>
  <div>
    <GoodsTop @search='searchFn'>
      <template>
        策略搜索：
      </template><!-- 插槽 -->
    </GoodsTop>
    <!-- 列表区域 -->
    <div class="list">
      <el-button
        type="warning"
        @click="addFn"
      ><i class="el-icon-circle-plus-outline"></i>新建</el-button>
      <el-table
        :data="classList"
        style="width: 100%"
        size='medium'
      >
        <el-table-column
          type="index"
          :index='indexAdd'
          label="序号"
          width="100"
        >
          <!--  type="index" :index="indexMethod" element表单中的方法 -->

        </el-table-column>
        <el-table-column
          prop="policyName"
          label="策略名称"
        >
        </el-table-column>

        <el-table-column
          prop="discount"
          label="策略方案"
        >
        </el-table-column>

        <el-table-column
          prop="createTime"
          label="创建日期"
        >
        </el-table-column>
        <!-- 操作 -->
        <el-table-column
          fixed="right"
          label="操作"
          width="200"
        >
          <template v-slot='{row}'>
            <el-link
              type="primary"
              @click="detailFn(row)"
            >查看详情</el-link>
            <el-link
              type="primary"
              @click="putFn(row)"
            >修改</el-link>
            <el-link
              type="danger"
              @click="delFn(row)"
            >删除</el-link>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <div class="page">
        <el-pagination
          @current-change="handleCurrentChange"
          :current-page="currentPage1"
          layout="slot,next,prev"
          prev-text='上一页'
          next-text='下一页'
          :total="totalCount "
        >
          <template>
            <span class="num-txt">
              共{{totalCount}}条记录
              第{{currentPage1}}/{{totalPage}}页
            </span>
          </template>
          <!--  @current-change 当前页变动时触发的事件 -->
        </el-pagination>
      </div>

      <!--新增对话框 -->
    </div>
    <el-dialog
      :title="flag ? '新增策略' :'修改策略'"
      :visible.sync="dialogFormVisible"
    >
      <el-form
        :model="form"
        :rules="rules"
        ref='addForm'
      >
        <el-form-item
          label="策略名称:"
          :label-width="formLabelWidth"
          prop="policyName"
        >
          <el-input
            type="text"
            placeholder="请输入"
            v-model="form.policyName"
            maxlength="15"
            show-word-limit
          >
          </el-input>
        </el-form-item>

         <el-form-item
          label="策略方案:"
          :label-width="formLabelWidth"
          prop="discount"
        >
          <el-input
            type="text"
            placeholder="请输入"
            v-model="form.discount"

          >
           <template #suffix>
              <button
                class="el-icon-arrow-up"
                @click="addFFn"
              ></button>
              <button
                class="el-icon-arrow-down"
                @click="subFFn"
              ></button>

            </template>
          </el-input>
        </el-form-item>
      </el-form>
      <div
        slot="footer"
        class="dialog-footer"
      >
        <el-button
          @click="dialogFormVisible = false"
          type="warning"
          plain
        >取 消</el-button>
        <el-button
          type="warning"
          @click="submit"
        >确 认</el-button>
      </div>
    </el-dialog>
<!-- 查看详情对话框 -->
    <el-dialog title="策略详情" :visible.sync="dialogTableVisible">
      <el-form >
    <el-form-item label="策略名称：" :label-width="formLabelWidth">
      {{table.policyName}}<!-- 把row给了table了 -->
    </el-form-item>
    <el-form-item label="策略方案：" :label-width="formLabelWidth">
      <el-table :data="miniList">
    <el-table-column type="index" :index='indexAddmini'  label="序号" width="130"></el-table-column>
    <el-table-column property="nodeName" label="点位名称" width="250"></el-table-column>
    <el-table-column property="innerCode" label="设备编号"></el-table-column>
  </el-table>
   <!-- 分页 -->
      <div class="pageMini">
        <el-pagination
          @current-change="handleCurrentChangeMini"
          :current-page="currentPage1Mini"
          layout="slot,next,prev"
          prev-text='上一页'
          next-text='下一页'
          :total="totalCountMini "
        >
          <template>
            <span class="num-txt">
              共{{totalCountMini}}条记录
              第{{currentPage1Mini}}/{{totalPageMini}}页
            </span>
          </template>
          <!--  @current-change 当前页变动时触发的事件 -->
        </el-pagination>
      </div>
    </el-form-item>
  </el-form>

</el-dialog>

  </div>
</template>

<script>
import GoodsTop from '@/components/goodstop.vue'

import { addPolicy, policySearch, delPolicy, putPolicy, detailPolicy } from '@/api/policy'
export default {
  name: 'stragy-page',
  components: {
    GoodsTop

  },
  async created () {
    // 商品类型
    this.handleCurrentChange()// 当前页变动时触发
  },
  methods: {
    // 查看详情
    detailFn (row) {
      console.log(row)
      this.dialogTableVisible = true
      this.table = { ...row }
      console.log(this.table)
      this.handleCurrentChangeMini()
    },
    async handleCurrentChangeMini (val = 1) {
      console.log(val)
      console.log(this.table.policyId)
      const res = await detailPolicy({ policyId: this.table.policyId, pageIndex: val, pageSize: this.pageSize })
      console.log(res)
      this.miniList = res.data.currentPageRecords
      this.totalCountMini = Number(res.data.totalCount)
      this.currentPage1Mini = Number(res.data.pageIndex)
      this.totalPageMini = Number(res.data.totalPage)
    },
    // 加加减减
    addFFn () {
      this.form.discount += 1
    },
    subFFn () {
      if (this.form.discount >= 1) {
        this.form.discount -= 1
      }
    },
    // 分页
    async handleCurrentChange (val = 1) {
      const res1 = await policySearch({ pageIndex: val, pageSize: this.pageSize })
      console.log(res1)
      this.classList = res1.data.currentPageRecords.map(item => {
        return {
          policyName: item.policyName,
          discount: item.discount,
          createTime: this.$moment(item.createTime).format('YYYY.MM.DD HH:mm:ss'),
          policyId: item.policyId
        }
      })
      this.pageIndex = res1.data.pageIndex
      this.totalPage = res1.data.totalPage
      console.log(this.totalPage)
      this.currentPage1 = val
      this.totalCount = Number(res1.data.totalCount)// 转化成数字
      // console.log(`当前页: ${val}`);
    },
    // 序号
    indexAddmini (index) {
      return this.pageSize * (this.currentPage1Mini - 1) + index + 1
    },
    indexAdd (index) {
      return this.pageSize * (this.currentPage1 - 1) + index + 1
    },
    // 查询
    async searchFn (input) {
      const res = await policySearch({ pageIndex: 1, pageSize: 10000 })
      console.log(res)
      input ? this.classList = res.data.currentPageRecords.filter(item => item.policyName === input) : this.handleCurrentChange()
      this.classList = this.classList.map(item => {
        return {
          policyName: item.policyName,
          discount: item.discount,
          createTime: this.$moment(item.createTime).format('YYYY.MM.DD HH:mm:ss'),
          policyId: item.policyId
        }
      })
      this.pageIndex = res.data.pageIndex
      this.totalPage = res.data.totalPage
      this.totalCount = Number(res.data.totalCount)// 转化成数字
      // console.log(`当前页: ${val}`);
    },
    // 新增确认
    async submit () {
      //  await this.$refs.form.validate()
      if (this.flag === true) {
        await addPolicy({ policyName: this.form.policyName, discount: this.form.discount })
      } else {
        console.log(this.form.policyId)
        await putPolicy({ policyName: this.form.policyName, discount: this.form.discount, policyId: this.form.policyId })
      }
      this.handleCurrentChange()
      this.form = {
        policyName: '',
        discount: 0,
        createTime: '',
        policyId: 0// roe给了form
      }
      this.$refs.addForm.resetFields()// 重置表单和校验
      this.dialogFormVisible = false
    },
    // 新建
    addFn () {
      this.dialogFormVisible = true
      this.flag = true
    },
    // 修改
    putFn (row) {
      this.dialogFormVisible = true
      this.flag = false
      this.form = { ...row }// 当前行的信息给到form
      // 回显
      // console.log(row.classId);
      // this.form.policyId=row.classId
      // this.form.className = row.className
    },
    // 删除
    async delFn (row) {
      await delPolicy({ pageIndex: this.pageIndex, pageSize: this.pageSize, policyId: row.policyId, policyName: row.policyName })// find返回对象
      this.handleCurrentChange()
      //  const ress= this.classList.find(item=>item.classId===classId)

      this.$message.success('删除成功')
    }
  },
  data () {
    return {
      /* 查看详情 */
      currentPage1Mini: 1,
      totalCountMini: 0,
      totalPageMini: 0,
      table: {},
      miniList: [{
        nodeName: '',
        innerCode: 0
      }
      ],
      /* ----------------- */
      dialogTableVisible: false,
      currentPage1: 1, // 当前页
      pageSize: 10,
      pageIndex: 1,
      totalPage: 0,
      totalCount: 0, // 期待是一个数字
      flag: false,

      classList: [
        { // 商品类型
          policyName: '',
          discount: '',
          createTime: '',
          policyId: 0
        }],
      dialogVisible: false,
      /* 新增 */
      form: {
        policyName: '',
        discount: 0,
        createTime: '',
        policyId: 0// roe给了form
      },
      rules: {
        policyName: [
          { required: true, message: '请输入', trigger: 'blur' },
          // 校验是否重复
          {
            validator: (rule, value, callback) => {
              const isRepeat = this.classList.some(item => item.policyName === value)
              isRepeat ? callback(new Error('已存在此名称的对象')) : callback()
            },
            trigger: 'blur'
          }
        ],
        discount: [
          { required: true, message: '请输入', trigger: 'blur' }
        ]
      },
      text: '',
      dialogFormVisible: false,
      formLabelWidth: '120px'
    }
  }
}

</script>

<style lang='less' scoped>
.pageMini{
  .el-pagination{
    margin-top: 15px;
  }
}
// ::v-deep .el-table_27_column_117     .is-leaf .el-table__cell{
//   margin-left: 20px;

// }
::v-deep .el-input__suffix-inner {
    pointer-events: all;
    display: flex;
    flex-direction: column;
  }
  ::v-deep .el-input .el-input__count .el-input__count-inner {
    background: #ffffff;
    line-height: 40px;
    display: inline-block;
    padding: 0 0px;
    height: 0px;
  }
  ::v-deep .el-input__suffix {
    position: absolute;
    height: 100%;
    right: 0px;
    top: 0;
    text-align: center;
    color: #fff;
    transition: all 0.3s;
    pointer-events: none;
    width: 30px;
  }
  ::v-deep .el-select > .el-input {
    display: block;
    width: 398px;
  }
  .num-txt {
    font-size: 16px !important;
    color: #dbdfe5 !important;
    font-weight: 400;
  }
  ::v-deep .el-pagination .btn-prev,
  ::v-deep .el-pagination .btn-next {
    width: 70px;
    height: 32px;
    margin: 0 16px;
    border-radius: 2px;
    background-color: #d5ddf8;
    color: #606266;
    float: right;
  }
  ::v-deep .el-pagination .btn-prev {
    float: right;
  }
  ::v-deep .el-dialog__footer {
    text-align: center;
  }
  .el-form-item__label {
    margin-right: 25px;
    font-size: 15px;
  }
  .el-input {
    width: 400px;
    height: 38px;
  }

  .page {
    width: 1100px;
    // display: flex;
    justify-content: space-between;
    position: absolute;
    bottom: 0;
    left: 0;
    background: #fff;
    padding: 40px 16px;
    margin-left: 20px;
    margin-right: 40px;
  }
  // ::v-deep.el-table__header-wrapper{
  //   background-color: #f3f6fb;
  // }
  .el-button.el-button--warning {
    margin-bottom: 10px;
  }
  .list {
    position: relative;
    height: 650px;
    background-color: #fff;
    padding: 25px;
  }

  /* .el-button.el-button--warning{
            margin-left: 10px;
            margin-top: 20px;

          } */
  .search-box.el-button.el-button--primary,
  .list.el-button.el-button--warning {
    width: 85px;
    height: 30px;
    font-size: 16px;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 36px;
    padding: 0;
    /* background-color: #5f84ff; */
    border: none;
    text-align: center;
  }
  .el-icon-circle-plus-outline {
    margin-right: 10px;
    font-size: 19px;
    margin-top: 1px;
  }
  .el-link.el-link--primary {
    margin-right: 10px;
  }
</style>
